<template>
    <div class="footer">
        <div class="container runoob-block">
            <div class="runoob">
                <dl>
                    <dt><a target="_blank" href="https://www.runoob.com/"> 菜鸟教程</a> </dt>
                    <dd>进一步学习HTML,JavaScript,CSS基础知识,以及其他知识</dd>
                </dl>
                <dl>
                    <dt><a target="_blank" href="https://cn.vuejs.org/guide/introduction.html">Vue中文文档</a> </dt>
                    <dd>全面了解Vue的知识,帮助开发Vue项目的不二之选</dd>
                </dl>
                <dl>
                    <dt><a target="_blank" href="https://developer.mozilla.org/zh-CN/"> MDN Web Docs</a></dt>
                    <dd>进一步了解JavaScript用法,了解Web API,解锁JavaScript高级用法</dd>
                </dl>
                <dl>
                    <dt><a target="_blank" href="https://www.freecodecamp.org/chinese/learn">freeCodeCamp</a> </dt>
                    <dd>在线开发项目,进一步提升自己的能力</dd>
                </dl>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>


</script>

<style lang='scss' scoped>
.footer {
    min-width: 100%;
    margin-top: 20px !important;
    background-color: #fff;
    position: sticky;
    z-index: 999;

    .runoob-block {
        border-top: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        padding-bottom: 50px;
        margin: 0 auto;

        .runoob {
            width: 64%;
            margin: 0 auto;
            min-height: 50px;

            dl {
                width: 25%;
                padding-left: 30px;
                color: gray;
                margin: 25px 0;
                float: left;

                dd {
                    font-size: 12px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
</style>